<template>
  <div id="comments">
    <div class="comment">
        <scroller style="top: 0px;"
              ref="commentPointScroller"
              :on-infinite="infinitePointComment">
          <div class="list-block media-list">
      <ul>
        <li v-for="topic in topics" style="border-bottom: dotted 1px #CCCCCC;">
            <div class="item-content">
            <div class="item-media"><img v-if="" v-bind:src="topic.customer.avatar" style='width: 2.2rem;height: 2.2rem;'></div>
            <div class="item-inner">
                <div class="userProfile">
                    <div class="item-title-row">
                    <div class="item-title">{{topic.customer.nickname}}</div>
                    </div>
                    <div class="item-subtitle" style="font-size: 0.75rem;">{{topic.cmsViewPoint.diffTime}}前</div>
                </div>
                <div class="userSchool">{{topic.customer.customerBaseExtend.schoolName}}</div>
            </div>
            </div>
            <div class="">
                <div class="card-content">
                  <div class="card-content-inner">{{topic.cmsViewPoint.pointText}}</div>
                  <div v-if="topic.cmsViewPoint.pointImg != '' && topic.cmsViewPoint.pointImg != null" class="card-content">
                    <div style="height: 200px;width:90%;margin-left: 10px;margin-bottom: 10px;" @click="preview(topic.cmsViewPoint.pointImg)" v-lazy:background-image="topic.cmsViewPoint.pointImg"></div>
                  </div>
                </div>
            </div>
            <div style="height: 30px; margin-top:0">
                <div slot="content" class="card-padding" style="text-align:right;hight:20px">
                    <span style="font-size:12px;color: #999;margin-right: 30px;height: 20px;display: block;float: right;">
                      {{topic.cmsViewPoint.commentCount}}
                    </span>
                    <span @click="show5=true" style="margin-right: 5px;height: 20px;display: block;float: right;">
                      <icon style="color: #999" name="comments-o" scale="1.0"></icon>
                    </span>
                    <span @click="clickLike(topic.cmsViewPoint.id, $event, topic.cmsViewPoint.ifFavort, idx)" style="font-size:12px;color: #999;margin-right: 30px;height: 20px;display: block;float: right;">
                      {{topic.cmsViewPoint.favortCount}}
                    </span>
                    <span @click="clickLike(topic.cmsViewPoint.id, $event, topic.cmsViewPoint.ifFavort, idx)" style="margin-right: 5px;height: 20px;display: block;float: right;">
                      <icon v-if="topic.cmsViewPoint.ifFavort == 1" style="color: #999" name="thumbs-up" scale="1.0"></icon>
                      <icon v-if="topic.cmsViewPoint.ifFavort == 2" style="color: #999" name="thumbs-o-up" scale="1.0"></icon>
                    </span>
                </div>
            </div>
        </li>
      </ul>
    </div>
    <group style="margin-top: -15px;">
      <cell title="回复列表">
      </cell>
    </group>
        <div>
        <ul>
            <li  v-for="(item, index) in pointComments" style="border-bottom: dotted 1px rgb(16, 197, 182);">
                <div style="padding: 10px 10px 0px 10px;">
                    <div style="width: 30px;height: 30px;float: left;">
                    <img style="width:30px; height:30px; border-radius:50%; overflow:hidden;text-align:center" align="absmiddle" v-bind:src="item.commentImg" />
                    </div>
                    <div style="width: 300px;height: 30px;float: left;line-height: 30px;margin-left: 5px;">
                    <span style="margin-left:2px;color:rgb(16, 197, 182);font-size:12px" v-if="item.commentType == 1">{{item.commentByName}}</span>
                    <span style="margin-left:2px;font-size:12px" v-if="item.commentType == 2"><span style="color:rgb(16, 197, 182);">{{item.commentByName}}</span> 回复 <span style="color:rgb(16, 197, 182);">{{item.commentTargetUserName}}</span></span>
                    </div>
                    <div style="height: 30px;clear:both;">
                    <p style="padding:5px;margin-left:30px;font-size:12px">{{item.commentContent}}</p>
                    <span @click="commentOther(index)" style="margin-right: 15px;height: 20px;display: block;float: right;">
                      <icon style="color: #999" name="comments-o" scale="1.0"></icon>
                    </span>
                    <span style="color:#999;margin-right:20px;font-size:12px;float:right">{{item.commentTime | formatDate }}</span>
                    
                    </div>
                    <div style="clear:both"></div>
                </div>
            </li>
        </ul>
        </div>
        </scroller>
    </div>
    <div v-transfer-dom>
      <confirm v-model="show5"
      ref="confirm5"
      title="写你的留言"
      @on-cancel="onCancel"
      @on-confirm="onConfirm5"
      @on-show="onShow5"
      @on-hide="onHide">
      <div style="margin-top: 5px;">
        <textarea v-model="content" id='txt1' style ="padding: 5px;
          height: 80px;
          width: 90%;
          margin: 0 auto;"/>
      </div>
      </confirm>
      <confirm v-model="show6"
        ref="confirm6"
        title="写你的留言"
        @on-cancel="onCancel"
        @on-confirm="onConfirm6"
        @on-show="onShow6"
        @on-hide="onHide">
        <div style="margin-top: 5px;">
          <textarea v-model="content2" id='txt1' style ="padding: 5px;
            height: 80px;
            width: 90%;
            margin: 0 auto;"/>
        </div>
      </confirm>
    </div>
 </div>
</template>

<script>

import { Grid, XHeader, XTextarea, Group, XButton, Toast, Cell, Confirm, TransferDom } from 'vux'
import Icon from 'vue-awesome'
import { formatDate, getCustomerId, commentModule } from '../utils/utils'
import { getAuthInfo } from '../utils/common'
import wx from 'weixin-js-sdk'

export default {
  filters: {
    formatDate (time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm')
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Grid,
    XHeader,
    XTextarea,
    Group,
    XButton,
    Toast,
    Icon,
    Cell,
    Confirm
  },
  data () {
    return {
      items: [],
      topics: [],
      pointId: 0,
      topic: '',
      pointComments: [],
      noData: '',
      currentPage: '0',
      commentShow: false,
      position: 'default',
      showPositionValue: false,
      submit001: '发布',
      disable001: false,
      content: '',
      content2: '',
      type: 1,
      index: 0,
      currentIndex: 0,
      show5: false,
      show6: false,
      customerId: getCustomerId()
    }
  },
  beforeRouteLeave (to, from, next) {
    console.log('离开页面')
    this.$destroy(true)
    next(true)
  },
  created: function () {
    getAuthInfo('home')
  },
  mounted () {
    if (this.$router.history.current.path === '/home') {
      console.log('路径是一个home')
    }
    console.log(this.$router)
    console.log(this.$router.history.current.path)
    this.pointId = this.$router.currentRoute.query.id
    let config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
      data: {
        'id': this.pointId,
        'customerId': this.customerId
      },
      responseType: 'json',
      method: 'post',
      currentPage: '0'
    }
    var self = this
    this.$ajax('api/cms/home/viewpoints/info', config).then(function (response) {
      console.log(response)
      console.log(response.data.code)
      console.log(response.data.data)
      self.topic = response.data.data
      self.topics.push(self.topic.item)
      console.log(self.topics)
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    onCancel () {
      this.content = ''
      this.content2 = ''
      console.log('on cancel')
    },
    onHide () {
      this.content = ''
      this.content2 = ''
      console.log('on hide')
    },
    onShow () {
      console.log('on show')
    },
    onShow5 () {
      this.$refs.confirm5.setInputValue('default')
    },
    onShow6 () {
      this.$refs.confirm6.setInputValue('default')
    },
    onConfirm5 () {
      this.commentShow = true
      var txt = this.content
      console.log(txt)
      this.type = 1
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'commentType': '1',
          'commentBy': this.customerId,
          'commentContent': txt,
          'commentModuleNo': commentModule.home_viewpoint,
          'commentTargetId': this.pointId,
          'customerId': this.customerId
        },
        responseType: 'json',
        method: 'post'
      }
      var self = this
      this.$ajax('api/cms/comments/add', config).then(function (response) {
        console.log(response)
        console.log(response.data.code)
        console.log(response.data.data)
        self.pointComments.unshift(response.data.data)
        self.content = ''
      }).catch(function (error) {
        console.log(error)
      })
    },
    onConfirm6 () {
      var txt = this.content2
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'commentType': '2',
          'commentBy': this.customerId,
          'commentContent': txt,
          'commentModuleNo': commentModule.home_viewpoint,
          'commentTargetId': this.pointId,
          'commentTargetUserId': this.pointComments[this.index].commentBy,
          'customerId': this.customerId
        },
        responseType: 'json',
        method: 'post'
      }
      var self = this
      self.$ajax('api/cms/comments/add', config).then(function (response) {
        console.log(response)
        console.log(response.data.code)
        console.log(response.data.data)
        self.pointComments.unshift(response.data.data)
        self.content2 = ''
      }).catch(function (error) {
        console.log(error)
      })
    },
    refresh: function (done) {
    },
    commentOther: function (index) {
      this.currentIndex = index
      this.commentShow = true
      this.type = 2
      this.show6 = true
    },
    commentMain: function () {
      this.commentShow = true
      this.type = 1
    },
    refreshPointComment: function (done) {
      console.log('下拉刷新观点评论数据')
      console.log('refreshPointComment')
      var self = this
      this.noData = true
      setTimeout(() => {
        self.points = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'currentPage': self.currentPage,
            'pageSize': '10',
            'id': self.pointId,
            'commentModuleNo': commentModule.home_viewpoint,
            'customerId': this.customerId
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/comments/query', config).then(function (response) {
          console.log(response)
          console.log(response.data.data.length)
          console.log(response.data.pagination.currentPage)
          self.currentPage = response.data.pagination.currentPage + 1
          self.pointComments = response.data.data
        }).catch(function (error) {
          console.log(error)
        })
        done()
      }, 500)
    },
    infinitePointComment: function (done) {
      console.log('上拉加载观点评论数据')
      console.log('infinitePointComment')
      var self = this
      if (this.noData) {
        console.log(this.noData)
        this.noData = false
        self.$refs.commentPointScroller.finishInfinite(true)
        return
      }
      setTimeout(() => {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'currentPage': self.currentPage,
            'pageSize': '10',
            'id': self.pointId,
            'commentModuleNo': commentModule.home_viewpoint,
            'customerId': this.customerId
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/comments/query', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          self.currentPage = response.data.pagination.currentPage + 1
          if (code === '01') {
            self.noData = '没有更多数据'
            self.$refs.commentPointScroller.finishInfinite(true)
            return
          }
          var data = response.data.data
          var start = data.length
          for (var i = 0; i < start; i++) {
            self.pointComments.push(data[i])
          }
          self.bottom = self.bottom + 10
          done()
        }).catch(function (error) {
          console.log(error)
        })
      }, 500)
    },
    preview (src) {
      /* eslint-disable no-undef */
      wx.previewImage({
        current: src,
        urls: [src]
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';

.box {
  padding: 15px;
}
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}

.vux-tab .vux-tab-item.vux-tab-selected{
    color: #10c5b6;
    border-bottom: 5px solid #10c5b6;
}

.vux-tab-bar-inner {
    display: block;
    background-color: #10c5b6 !important;
    margin: auto;
    height: 100%;
    -webkit-transition: width 0.3s cubic-bezier(0.35, 0, 0.25, 1);
    transition: width 0.3s cubic-bezier(0.35, 0, 0.25, 1);
}
.m-img {
  padding-bottom: 33%;
  display: block;
  position: relative;
  max-width: 100%;
  background-size: cover;
  background-position: center center;
  cursor: pointer;
  border-radius: 2px;
}

.m-title {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 2px rgba(0, 0, 0, .5);
  font-weight: 500;
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

.m-time {
  font-size: 12px;
  padding-top: 4px;
  border-top: 1px solid #f0f0f0;
  display: inline-block;
}

.list-block {
    margin: 0.75rem 0;
    font-size: 0.85rem;
}
.list-block ul {
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.list-block li {
    box-sizing: border-box;
    position: relative;
}
.list-block .item-content {
    box-sizing: border-box;
    padding-left: 0.75rem;
    min-height: 2.2rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.list-block.media-list .item-media {
    padding-top: 0.45rem;
    padding-bottom: 0.5rem;
}
.list-block .item-media {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    box-sizing: border-box;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-top: 0.35rem;
    padding-bottom: 0.4rem;
}
.list-block.media-list .item-media img {
    display: block;
}
.list-block.media-list .item-inner {
    display: block;
    padding-top: 0.5rem;
    padding-bottom: 0.45rem;
    -webkit-align-self: stretch;
    align-self: stretch;
}

.list-block .item-media + .item-inner {
    margin-left: 0.75rem;
}

.list-block .item-inner {
    padding-right: 0.75rem;
    position: relative;
    width: 100%;
    padding-top: 0.4rem;
    padding-bottom: 0.35rem;
    min-height: 2.2rem;
    overflow: hidden;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.userProfile {
    float: left;
    line-height: 1.1rem;
    font-size: 0.75rem;
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.list-block.media-list .item-title-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.list-block.media-list .item-title {
    font-weight: 500;
}
.list-block .item-subtitle {
    font-size: 0.75rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
}
.userSchool {
    line-height: 2.2rem;
    float: right;
    font-size: 0.75rem;
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.card-content-inner{
  margin-left:10px;
}
.follow{
  color: #ff8989;
  border-color: #ff8989;
  border-radius: 4px;
  border: 1px solid;
  width: 80px;
  margin: 0 auto;
}
.h-write-point{
  color: #666;
}
.comment {
  margin-top:0px;
}
.issue_comment {
  position: absolute;
  width:97.5%;
  bottom: 2px;
  background:#efebeb;
  padding: 5px;
}
.comment_btn {
  background-color:#eeeeee !important;
  height:30px;
  width:80px;
  color:#000;
  font-size:8px;
  letter-spacing:5px;
  margin-top:5px;
  float:right;
}
</style>
